<template>
    <div>
        <div>测试合并</div>
        <!-- <Debounce :time='1000' !isDebounce> -->
        <el-button @click='addclick'>添加商铺 防抖 你想推迟执行一个事件，即在上一次触发该事件的X毫秒后</el-button>
        <el-button @click='addclick1'>添加商铺 节流 当你需要确保一个事件在X毫秒后再触发</el-button>
        <div type="text" v-html="firstipt"></div>
        <!--    <a :href="he(value)[0]">
            <span>{{he(value)[1]| strLength(5)}}

            </span> -->
        <!-- </a> -->

        <!-- </Debounce> -->
        <!--当是isDebounce时表示是防抖函数，!isDebounce是节流函数，time是执行时间间隔-->
        <!-- <Debounce :time='1000' !isDebounce>
            <el-button @click='addclick1'>节流</el-button>
        </Debounce> -->
        <el-input v-model="demo"></el-input>
        <div>{{value}}</div>
        <el-input v-model="home.name" style="margin-top:20px;"></el-input>
        <div> {{names}}</div>
        <div>vuex</div>
        <el-button @click="add">+</el-button>
        <el-button @click="del">-</el-button>
        <h1>{{num}}</h1>

        <p>{{this.$store.state.module1.num}}</p>
        <button @click="aaa">点击</button>
        <button @click="changeSkin">点击皮肤</button>
        <div></div>
        <div>名字：{{skin}} 手机号：{{phoneShow}}性别：{{sexShow}}</div>

    </div>
</template>

<script>
    import { _debounce, _throttle } from "@/utils/util.js";

    // import {
    //     debounce
    // } from '@/utils/util.js'
    import { mapState, mapMutations, mapActions, mapGetters } from "vuex";


    export default {
        name: 'name',
        data() {
            return {
                home: {
                    name: '',
                },
                names: '',
                demo: '',
                value: '',
                firstipt: '11111111111',
                firstipt: '<p>亲爱的250</p><a href="http://www.w3school.com.cn">W3School</a>',

            }
        },
        computed: {
            // 使用state辅助函数,使用对象方式时，名称可以不一致
            // ...mapMutations(['changeSkins']),
            ...mapState({
                num: state => state.module1.num,
                skin: state => state.skin.skin,


            }),
            ...mapGetters(['phoneShow']),
            sexShow() {
                return this.$store.getters.sexShow(1)
            },
            // phone() {
            //     return this.$store.getters.phoneShow
            // },
            newName() {
                return this.home.name
            }
        },
        watch: {
            demo(val) {
                this.value = this.demo;
            },
            newName(values) {
                this.names = values;
            }
        },
        methods: {
            aaa() {
                //详情列表
                this.$axios.get("http://192.168.11.164:8888/spring-boot/rest/getSingleEquimentOnTimePeriodStatus", {
                    params: {
                        startTime: '2020-06-2 00: 00: 00',
                        endTime: '2020-07-3 00: 00: 00'
                    }
                }).then(v => {})
            },
            add() {
                this.$store.dispatch('conClick')
            },
            // ...mapMutations({ add: 'delClick' }),
            // ...mapMutations({ del: 'dell' }),
            ...mapMutations({ changeSkin: 'changeSkins' }),


            del() {
                this.$store.commit('dell')
            },
            he(value) {
                const reg = /<a[^>]*href=[ '"]([^"]*)[' "][^>]*>(.*?)<\/a>/g;
                var arr = []
                while (reg.exec(value) != null) {
                    arr.push(RegExp.$1 + "\n");
                    arr.push(RegExp.$2 + "\n");
                }
                return arr
            },
            // addclick() {
            //     console.log("1111");

            // },

            addclick: _debounce(function(_type, index, item) {
                console.log("1111");
                var arr = [1, 2, 3, 5, 67]
                for (var item of arr)
                    console.log(item);

            }, 200),

            addclick1: _throttle(function(_type, index, item) {
                console.log("3333333333");
            }, 200),


            // 防抖 每次触发事件时都取消之前的延时调用方法：
            defounce(fn) {
                let timeOut = null //存放定时器的返回值
                return function() {
                    clearTimeout(timeOut); // 每当用户输入的时候把前一个 setTimeout clear 掉
                    timeOut = setTimeout(() => { //然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数
                        fn.apply(this, arguments);
                    }, 500)
                }
            },
            // 节流 每次触发事件时都判断当前是否有等待执行的延时函数
            throttle(fn){
                let canRun=true;// 通过闭包保存一个标记
                return function(){
                    if(!canRun) return;// 在函数开头判断标记是否为 true，不为 true 则 return
                    canRun = false; // 立即设置为 false
                    setTimeout (()=>{
                        fn.apply(this,arguments);
                        // 最后在 setTimeout 执行完毕后再把标记设置为 true(关键) 表示可以执行下一次循环了。当定时器没有执行的时候标记永远是 false，在开头被 return 掉
                        canRun=true;
                    },500)
                }
            }



        }
    }
</script>

<style scoped>

</style>